<template>
  <div>
    <div class="fcRightBox">
      <div class="fcHeader">
        <div class="fcHeader-title-container">
          <div class="left-part">
            <div class="title">账户报告</div>
            <div class="refresh-data-time"></div>
          </div>
          <div class="right-part">
                        <span class="baidu-market-tip">下载<a
                            href="https://mobile2.baidu.com/index.html?navfrom=fcreport" target="_blank"
                            rel="noreferrer"><span
                            class="baidu-market-name">百度营销APP</span></a>，手机端随时随地看数据</span>
            <div class="fcHeader-date-pick-container">
              <el-date-picker class="custom-date-picker"
                              format="yyyy/MM/dd"
                              v-model="timerArray"
                              style="width: 240px"
                              type="daterange"
                              align="right"
                              range-separator="~"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="queryList"
                              :picker-options="pickerOptions">
                <template slot="prefix">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                       class="custom-icon" focusable="false">
                    <path fill="currentColor"
                          d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                  </svg>
                </template>
              </el-date-picker>
              <el-checkbox v-model="checked">比较</el-checkbox>
            </div>

          </div>
        </div>
        <div class="account-report-radio-container">
          <div class="account-report-radio-card" @click="isSelect=1;queryList()"
               :class="isSelect==1?'account-report-radio-card-selected ':''">
            <div class="account-report-radio-card-base">账户整体
              <div class="account-report-radio-card-base-cost" >消费<span
                  class="account-report-radio-card-base-cost-num">{{ actTopSum.totalConsumption }}</span>元
              </div>
            </div>
          </div>
          <div class="account-report-radio-card" @click="isSelect=2;queryList()"
               :class="isSelect==2?'account-report-radio-card-selected ':''">
            <div class="account-report-radio-card-base">搜索平台
              <div class="account-report-radio-card-base-cost">消费<span
                  class="account-report-radio-card-base-cost-num">{{ actTopSum.streamConsumption }}</span>元
              </div>
            </div>
          </div>
          <div class="account-report-radio-card" @click="isSelect=3;queryList()"
               :class="isSelect==3?'account-report-radio-card-selected ':''">
            <div class="account-report-radio-card-base">轻舸平台
              <div class="account-report-radio-card-base-cost">消费<span
                  class="account-report-radio-card-base-cost-num">{{ actTopSum.lightConsumption }}</span>元
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px">
          <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
            <span slot="prefix" class="select-prefix">时间单位:</span>
            <el-option v-for="item in sumWaySelectList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>

          </el-select>

        </div>
      </div>
      <div
          class="light-ai report-sdk-smart-query-area-container light-ai-card light-ai-card-medium light-ai-card-strong">
        <div class="light-ai light-ai light-ai-card-header light-ai-slot light-ai-group" style="gap: 50px;">
          <div class="light-ai light-ai-card-header-main light-ai-slot-main" style="font-size: 16px">智能数据查询</div>
        </div>
        <div class="light-ai-card-body">
          <div
              class="light-ai light-ai light-ai light-ai-omni-input light-ai-omni-input-medium light-ai-slot light-ai-slot-vertical light-ai-group light-ai-group-gap-xsmall">
            <div class="light-ai light-ai-slot-main">
              <div
                  class="light-ai light-ai light-ai-omni-input-main light-ai-slot light-ai-group light-ai-group-gap-medium">
                <div class="light-ai light-ai-slot-main">
                  <div class="light-ai light-ai-rich-input"
                       style="--internal-light-ai-min-rows: 1; --internal-light-ai-max-rows: 5;">
                    <div contenteditable="true" translate="no" class="tiptap ProseMirror"
                         tabindex="0"><p class="is-empty is-editor-empty"><br
                        class="ProseMirror-trailingBreak"></p></div>
                  </div>
                </div>
                <div class="light-ai light-ai-omni-input-after light-ai-slot-after"
                     style="display: flex;align-items: center;justify-content: space-between">
                  <div style="display: inline-block;height: 25px;line-height: 25px">
                    <span
                        class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">0</span><span
                      class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">/100</span></div>
                  <button style="margin-left: 10px;font-size: 24px;"
                          class="light-ai light-ai-omni-input-send light-ai-button light-ai-button-medium light-ai-button-icon light-ai-button-icon-medium light-ai-button-disabled light-ai-button-icon-only"
                          type="button" disabled="">

                    <svg fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                         class="dls-icon light-ai-omni-input-send-icon dls-icon-active"
                         focusable="false">
                      <g stroke-width="2">
                        <path
                            d="m20.7163 11.2981-16.19439-8.85633c-.62917-.34407-1.35838.24963-1.14899.93549l2.56119 8.38934c.04648.1522.04648.3149 0 .4671l-2.56117 8.389c-.20939.6859.51981 1.2796 1.14899.9355l16.19437-8.8563c.5549-.3034.5549-1.1004 0-1.4038z"
                            fill="currentColor" stroke="currentColor"></path>
                        <path d="m4.5 12h9" stroke="#fff"></path>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <p>
          <div class="radio-tag-groups-select-container">
            <div class="radio-tag-groups">
              <div class="radio-tag-groups-container">
                <div class="radio-tag-groups-name"><span>猜你想搜：</span></div>
                <div
                    class="light-ai light-ai radio-tag-groups-tag-group-container light-ai-tag-group light-ai-group light-ai-group-gap-xsmall">
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">转化率最高的3个出价策略</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">起量预算最高的3个出价策略数据</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">目标转化量最高的出价策略数据</span></div>
                </div>
              </div>
            </div>
          </div>
          <button type="button" name="" class="one-button one-main one-button-text-strong one-button-medium">
                        <span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                                         height="24" class="dls-icon icon-sync" focusable="false"
                                         style="margin-top: 15px"><path
                            fill="currentColor"
                            d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path></svg>换一换</span></span>
          </button>
          </p><p></p></div>
      </div>
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div class="">
          <div style="margin-bottom: 8px" class="contentHeader">
            <p>详细数据</p>
            <div class="contentHeader_right" style="font-size: 12px;width: 327px">
              <el-dropdown>
                <el-button type="primary"
                           style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value1
                    }}</span>

                  <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in options1" :key="item.value">{{ item.label }}</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <el-select style="width: 120px" v-model="value2" placeholder="请选择"
                         class="select-with-prefix1">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-button
                  style="    border-radius: 4px;width:74px;height: 28px;line-height: 28px;padding: 0 12px;font-size: 12px;">
                重置列宽
              </el-button>
            </div>
          </div>
          <el-table border
              v-if="isSelect==1"
              :data="tableList"
              style="width: 100%;background: #EBEDF5"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期" align="center"
                sortable
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="账户" align="center"
                sortable
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="consumption"
                label="消费" min-width="120" align="center"
            >
            </el-table-column>
            <el-table-column
                prop="toShow"
                label="展现
" align="center"
                sortable
                min-width="120">
            </el-table-column>
            <el-table-column align="center"
                prop="click"
                label="点击
"
                sortable
                min-width="120">
            </el-table-column>
            <el-table-column align="center"
                prop="clickRate"
                label="点击率
"
                sortable
                min-width="120">
            </el-table-column>

            <el-table-column align="center"
                prop="directClueMeasure"
                label="服务直达线索量"
                sortable
                min-width="160">
            </el-table-column>
            <el-table-column align="center"
                prop="directAverageCost"
                label="服务直达线索量平均成本"
                sortable
                min-width="200">

            </el-table-column>
            <!--              <el-table-column-->
            <!--                  prop="wrapClueCost"-->
            <!--                  label="线索加油包成本"-->
            <!--                  sortable-->
            <!--                  min-width="160">-->
            <!--              </el-table-column>-->

            <el-table-column
                prop="wrapClueMeasure" align="center"
                label="线索加油包线索量" min-width="160"   sortable
            >
            </el-table-column>
            <el-table-column
                prop="wrapClueCost"
                label="线索加油包线索成本"
                sortable align="right"
                min-width="152">
            </el-table-column>

          </el-table>
          <el-table
              v-else-if="isSelect==2"
              :data="tableList"
              style="width: 100%;background: #EBEDF5"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="账户"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="consumption"
                label="消费"
            >
            </el-table-column>
            <el-table-column
                prop="toShow"
                label="展现
"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                label="点击"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="clickRate"
                label="点击率"
                min-width="180"
            >
              <template slot-scope="scope">
                {{ scope.row }}%
              </template>
            </el-table-column>
            <el-table-column
                prop="avgClickPrice"
                label="平均点击价格
"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省份"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="city"
                label="城市"
                sortable
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="payWay"
                label="支付方式"
            >
            </el-table-column>

          </el-table>
          <el-table
              v-else
              :data="tableList"
              style="width: 100%;background: #EBEDF5"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期" align="center"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="账户" align="center"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="consumption"
                label="消费" align="center"
            >
            </el-table-column>
            <el-table-column
                prop="toShow"
                label="展现
"
                sortable align="center"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                label="点击"
                sortable align="center"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="clickRate"
                label="点击率"
                min-width="180" align="center"
            >
              <template slot-scope="scope">
                {{ scope.row }}%
              </template>
            </el-table-column>
            <el-table-column
                prop="avgClickPrice  "
                label="平均点击价格
" align="center"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="avgClickPrice"
                label="平均点击价格"
                sortable align="center"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省份"
                sortable align="center"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="city"
                label="城市" align="center"
                sortable
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="targetConType"
                label="目标转化类型" align="center"
            >
            </el-table-column>
            <el-table-column
                prop="targetConMeasure"
                label="目标转化量" align="center"
            >
            </el-table-column>
            <el-table-column
                prop="targetConCost"
                label="目标转化成本" align="center"
            >
            </el-table-column>
            <el-table-column
                prop="conRate"
                label="转化率"
                align="right"
            >
            </el-table-column>

          </el-table>
          <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
        </div>
        <div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import {
  getAccountAllSumList, getActRepostListSum,
  getActSteamSumList,
  getLightVesselSumList,
  getactTopSum
} from "@/services/model/datacenter";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      actTopSum: {},
      value: 0,
      value1: '自定义列',
      value2: '下载',
      options1: [{
        value: 1,
        label: '自定义列'
      }, {
        value: 2,
        label: '默认推荐'
      }],
      options2: [{
        value:  '下载',
        label: '下载'
      }, {
        value: '发送邮箱',
        label: '发送邮箱'
      }],
      options: [{
        value: '合计',
        label: '合计'
      }, {
        value: '分时',
        label: '分时'
      }, {
        value: '分日',
        label: '分日'
      }, {
        value: '分周',
        label: '分周'
      }, {
        value: '分月',
        label: '分月'
      }],
      isSelect: 1,
      activeName: '整体走势',
      checked: false,


    };
  },
  methods: {
    async getactTopSum() {
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let resTop = await getactTopSum(this.form)
      this.actTopSum = resTop.data || {}
    },
    async queryList() {
      this.getactTopSum()
      console.log( this.form)
      this.tableList = []
      let action = this.isSelect == 1 ? getAccountAllSumList : this.isSelect == 2 ? getActSteamSumList : getLightVesselSumList
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let res = await action(this.form)
      let resAll = await getActRepostListSum(this.form)
      this.tableList = res.rows || []
      if (res.rows.length !== 0) {
        if (resAll.data) {
          let allList = {...resAll.data, createTime: '总计-' + res.total, userName: '-'}
          this.tableList.push(allList)
        }
      }
      this.form.total = Math.ceil(Number(res.total) );
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {

    this.queryList()

  }
};
</script>
<style>
</style>
<style  lang="less">
.fcRightBox {
  height: 100%;
  width: calc(100vw - 240px);

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {

      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .left-part {

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }

      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    padding-top: 12px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;
          margin-left: 30px;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6 !important;
      }
    }

  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67C23A;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
</style>



<style scoped>
.fcHeader-date-pick-container {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.el-date-picker.custom-date-picker ::v-deep .el-input__inner {
  padding-left: 40px; /* 调整根据需要的图标宽度 */
}

.el-date-picker.custom-date-picker .custom-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.el-submenu__title ::v-deep .el-submenu__icon-arrow {
  color: red !important;
}
</style>